<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<div class="page">
				<!-- <div class="page-left">
					<el-scrollbar>
						<el-tree
							ref="treeRef"
							:data="treeList"
							:props="defaultProps"
							default-expand-all
							:expand-on-click-node="false"
							node-key="id"
							:highlight-current="true"
							:current-node-key="currentNodeKey"
							@node-click="handleNodeClick"
						/>
					</el-scrollbar>
				</div> -->
				<el-icon class="full-screen" @click="setFullScreen"><FullScreen /></el-icon>
				<div class="page-right">
					<met2d-view id="container" :meta2dUrl="tagJson" :met2dId="met2dId" ref="tagLabel"></met2d-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { sceneObjQuery, sceneObjQuery2, zutaiDevinfo, getDevice } from '/@/api/basiciot/iconfiguration/list';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import mittBus from '/@/utils/mitt';
import { getObj, serviceInvoke } from '/@/api/basiciot/device/device';
import moment from 'moment';
// 引入组件
const Met2dView = defineAsyncComponent(() => import('./met2d.vue'));

const stores = useTagsViewRoutes();

let tagId = ref('');
let tagJson = ref('');

let tagLabel = ref();
let met2dId = ref('');

let treeList = ref([]);
let treeList2 = ref([]);
let currentNodeKey = ref('');
const treeRef = ref();
const centerDialogVisible = ref(false);
const defaultProps = {
	children: 'children',
	label: 'name',
	value: 'id',
};

let dialogObj: any = reactive({
	deviceName: '',
	remark: '',
});

let dialogWidth = ref(900);
let dialogTitle = ref('电表详情');
let needModal = ref(false);

//视频 spilt: 1, //分屏
let spilt = ref('1');
let videoUrl = ref('');
const showInvokeService = (service) => {
	state.serviceFormVisible = true;
	state.title = '服务调用';
	state.serviceForm.identifier = service.identifier;
	state.serviceForm.params = {
		name: service.name,
		value: service.value.toString(),
		dataType: service.dataType,
	};
};

// 页面加载时
onMounted(() => {
	getTreeList();
});

const getTreeList = () => {
	sceneObjQuery({
		id: '140',
	}).then((res) => {
		treeList.value = res.data || [];
		// let id = res.data[0]?.id;
		// currentNodeKey.value = id;
		// treeRef.value.setCurrentKey(id);
		tagId.value = res.data[0].id;
		tagJson.value = res.data[0].json;
		met2dId.value = res.data[0].scadaId;
	});
};

const handleNodeClick = (data: any) => {
	currentNodeKey.value = data.id;
	treeRef.value.setCurrentKey(data.id);
	tagId.value = data.id;
	tagJson.value = data.json;
	met2dId.value = data.scadaId;
};

const setFullScreen = () => {
	document.getElementById('container').requestFullscreen();
	tagLabel.value.resize();
};

// 页面销毁时，关闭监听布局配置/i18n监听
onUnmounted(() => {
	mittBus.off('openShowStatusDb');
	mittBus.off('openShowVideo');
});
</script>

<style lang="scss" scoped>
.demo-tabs {
	width: 100%;
	height: 550px;
}
.page {
	position: relative;
	display: flex;
	.page-left {
		height: 400px;
		width: 150px;
		.el-tree {
			width: 150px;
			border-radius: 5px;
		}
	}
	.page-right {
		flex: 1;
	}
}
.zanwu_data {
	height: 300px;
	line-height: 300px;
	text-align: center;
	margin-left: -40px;
}
.full-screen {
	position: absolute;
	right: 0;
	cursor: pointer;
	z-index: 100;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	&:hover {
		transform: scale(1.2);
	}
}
</style>
